<template>
  <!-- gmtCreate: "2020-05-19 02:25:52"
id: "001"
idCard: "433127199909035223"
isDeleted: false
name: "孙鹏翔"
page: null
photo: null
profession: "软件技术"
sex: 0
sort: 111
studentId: "201717041233"
uname: "admin24"
  userId: "126112225713"-->
  <el-row :gutter="20">
    <el-col :span="4">
      <div class="grid-content bg-purple">
        <div>&emsp;&emsp;&emsp;</div>
      </div>
    </el-col>
    <el-col :span="16">
      <div class="grid-content bg-purple">
        <div class="as demo-input-suffix">
          <h6>用户名</h6>
          <el-input v-model="studentInfo.name" placeholder="请输入用户名"></el-input>
        </div>
        <div class="as demo-input-suffix">
          <h6>学号</h6>
          <el-input v-model="studentInfo.studentId" placeholder="请输入用户名"></el-input>
        </div>
        <div class="as demo-input-suffix">
          <h6>身份证号</h6>
          <el-input v-model="studentInfo.idCard" placeholder="请输入用户名"></el-input>
        </div>
        <div class="as demo-input-suffix">
          <h6>性别</h6>
          <el-select v-model="studentInfo.sex" clearable placeholder="请选择">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="0" label="男" />
          <el-option :value="1" label="女" />
        </el-select>
        </div>
        <div class="as demo-input-suffix">
          <h6>专业</h6>
          <el-select
            v-model="studentInfo.subjectParentId"
            placeholder="请选择"
            @change="subjectLevelOneChanged"
          >
            <el-option
              v-for="subject in subjectNestedList"
              :key="subject.id"
              :label="subject.title"
              :value="subject.id"
            />
          </el-select>
          <el-select v-model="studentInfo.profession" placeholder="请选择">
            <el-option
              v-for="subject in subSubjectList"
              :key="subject.value"
              :label="subject.title"
              :value="subject.id"
            />
          </el-select>
        </div>
        <div class="as demo-input-suffix">
          <h6>上传身份证</h6>
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
        <h6></h6>
        <el-button type="primary" @click="saveOrUpdate">保存</el-button>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
</template>

<style>
.as {
  width: 50%;
}
</style>
<script>
import subject from "@/api/subject";
import student from "@/api/student";
export default {
  data() {
    return {
      studentInfo: {  
            idCard: "",
            name: "",
            profession: "",
            sex: 0,
            studentId: "",
            photo:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589875685531&di=258e6407ed84d81c7ec53040ee8e5fe7&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171118%2F2fae2707d4e44ff685d2082c6504db13.jpeg"
      },
      subjectNestedList: [], //一级分类列表
      subSubjectList: [] //二级分类列
    };
  },
  created() {
    this.init();
  },
//   handleAvatarSuccess(res, file) {
//       console.log(res); // 上传响应
//       this. studentInfo.studentInfo.photo = res.data.imgurl;
//     },
  methods: {
      saveOrUpdate(){
       student
        .save(this.studentInfo)
        .then(response => {
          return this.$message({
            type: "success",
            message: "保存成功!"
          });
        })
        .then(resposne => {
          this.$router.push({ path: "/statistics" });
        })
        .catch(response => {
          this.$message({
            type: "error",
            message: "保存失败"
          });
        });
    },
    init() {
      this.initSubjectList();
    },
    subjectLevelOneChanged(value) {
      for (var i = 0; i < this.subjectNestedList.length; i++) {
        var data = this.subjectNestedList[i];
        if (data.id === value) {
          this.subSubjectList = data.children;
          this.courseInfo.subjectId = "";
        }
      }
    },
    initSubjectList() {
      subject.getNestedTreeList().then(response => {
        this.subjectNestedList = response.data.subjectList;
      });
    },
    
  }
};
</script>